import React, { Component } from 'react'
import Checkbox from '../../Checkbox/Checkbox.jsx'
import PropTypes from 'prop-types'
import './List.css'

export default class List extends Component {
  static propTypes = {
    item: PropTypes.object.isRequired,
    delList: PropTypes.func.isRequired,
  }
  render() {
    return (
      <div className="List">
        <Checkbox value={this.props.item.check} bindChange={this.handleChange} />
        <span>{this.props.item.value}</span>
        <button className="button" onClick={() => this.props.delList(this.props.item.id)}>删除该项</button>
      </div>
    )
  }

  /**
   * 复选框改变事件
   * @param {boolean} value - 改变后的值
   * @returns {function}
   */
  handleChange = (value) => this.props.changeCheck(this.props.item.id, value)
}
